<template>
      <div class='deviceContainer'>
          <img src='/static/images/nav_screen@3x.png' class='header-icon' @click.stop='showModal'/>
          <div class='info-card-wrap'>
            <scroll-view  style="height:100%" :scroll-y="true" @scrolltolower="scrolltolower">
               <DeviceCard v-for='(item,index) in dataList' :key='index' :item='item' :hide='index==0' cardType='1' @selectDevice='toDetail(item)'/>
            </scroll-view>
          </div>
          <i-drawer mode="right" :visible="modalShow" mask-closable="false">
            <view class="modal-container">
                <div class='select-title'>项目</div>
                <div class='select-wrap'>
                  <scroll-view style='height:100%;' :scroll-y="true">
                    <radio-group  @change="handleChange">
                        <label  v-for="(item,index) in projectList" :key="index">
                          <div class='radio-line'  @click="handleChange">
                              <div class='radio-wrap'>
                                <image src='/static/images/icon_confirm@3x.png' v-if='selectId==item.id'/>
                                <image src='/static/images/icon_unconfirm.png' v-else/>
                                <input type="radio" name="list" :value="item.id" :checked="selectId==item.id" class='radio'>
                              </div>
                              <div>{{item.name}}</div>
                          </div>
                        </label>
                    </radio-group>
                  </scroll-view>
                </div>   
            </view>
        </i-drawer>
        <i-drawer mode="right" :visible="modalShow2" mask-closable="false">
            <view class="modal-container">
                <div class='select-title'>级别</div>
                <div class='select-wrap'>
                  <scroll-view style='height:100%;' :scroll-y="true">
                    <radio-group  @change="handleChange2">
                        <label  v-for="(item,index) in levelList" :key="index">
                          <div class='radio-line' @click="handleChange2">
                              <div class='radio-wrap'>
                                <image src='/static/images/icon_confirm@3x.png' v-if='selectId2==item.id'/>
                                <image src='/static/images/icon_unconfirm.png' v-else/>
                                <input type="radio" name="list" :value="item.id" :checked="selectId2==item.id" class='radio'>
                              </div>
                              <div>{{item.name}}</div>
                          </div>
                        </label>
                    </radio-group>
                  </scroll-view>
                </div>
            </view>
        </i-drawer>
      </div>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
import DeviceCard from '@/components/device_card/device_card.vue';
export default { 
  data() {
    return {
      scrollTop : 0,
      modalShow:false,
      modalShow2:false,
      selectId:null,
      selectId2:3,
      projectId:null,
      projectSelect:null,
      dataList:[],
      projectList:[],
      alarmLevel:3,
      page:1,
      totalPage:1,
      levelList:[
        {
          id:-1,
          name:'全部'
        },
        {
          id:3,
          name:'高级'
        },
        {
          id:2,
          name:'中级'
        },
        {
          id:1,
          name:'低级'
        }
      ]
    }
  },
  components: {
    DeviceCard
  },
  computed:{
    ...mapState(['userInfo','imgHost']),
  },
  beforeMount(){
    this.findProject();
  },
  methods:{
      findProject(){
        this.$http.post({
            url:'/project/getBuildings',
            data:{
                ukey:this.userInfo.ukey,
                userId:this.userInfo.userId,
            }
          }).then((res)=>{
              if(res.s==0){
                  this.projectList = res.i.Data;
                  this.projectSelect = this.projectList[0];
                  this.selectId = this.projectSelect.id;
                  this.projectId = this.selectId;   
                  this.queryData();   
              }
          }).catch((e)=>{
              console.log('请求失败',e)
          })
      },
      queryData(){
        if(this.page==1) this.dataList = [];
        this.$http.post({
          url:'/alarm/getRealtimeAlarms',
          data:{
              ukey:this.userInfo.ukey,
              projectId:this.projectId,
              page:this.page,
              alarmLevel:this.alarmLevel
          }
        }).then((res)=>{
            if(res.s==0){
                this.totalPage = res.i.Data.totalPage;
                this.page = res.i.Data.page;
                this.dataList = [...this.dataList,...res.i.Data.alarmList];
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
      },
      scrolltolower(){
          if(this.page<this.totalPage){
            this.page++;
            this.queryData() 
          }
      },
      showModal(){
        this.selectId = this.projectId;
        this.modalShow = true;
      },
      handleChange(el) {
        if(el.mp.detail.value){
          this.selectId = el.mp.detail.value;
          this.projectId = this.selectId;
        }
        this.modalShow = false;
        this.modalShow2 = true;
      },
      handleChange2(el) {
        this.selectId2 = el.mp.detail.value;
        this.alarmLevel = this.selectId2;
        this.modalShow2 = false;
        this.queryData()
      },
      toDetail(alarm){
          var obj = JSON.stringify(alarm)
          wx.navigateTo({
            url:`/pages/alarm_detail/main?alarm=${obj}`
          }) 
      },
  }
}
</script>

<style lang='less'>
    page{
        background:#eef7fd;
        height:100%;
    }
    ::-webkit-scrollbar{
        width: 0;
        height: 0;
        color: transparent;
    }
    .deviceContainer{
      height: 100%;
      display: flex;
      flex-direction: column;
      .info-card-wrap{
          height: 50rpx;
          flex:1;
      }
      .header-icon{
        position: absolute;
        z-index:99;
        right:5rpx;
        top: 7rpx;
        width: 40rpx;
        height: 40rpx;
      }
      .modal-container{
        background: #fff;
        width:60vw;
        height: 94vh;
        display: flex;
        flex-direction: column;
        z-index:9;
        .btn-small{
          font-size:32rpx;
          height: 60rpx;
          line-height: 60rpx;
          &.red{
            background:#fe5c57!important;
          }
          &.blue{
            background:#1182d2!important;
          }
        }
        .select-title{
          background: #1380d3;
          color: #fff;
          font-size:32rpx;
          height: 100rpx;
          line-height: 100rpx;
          padding-left:20rpx;
        }
        .select-wrap{
          flex:1;
          height: 50rpx;
        }
        .radio-line{
          height: 70rpx;
          line-height: 70rpx;
          padding: 0 20rpx;
          color:#83878a;
          font-size: 30rpx;
          display: flex;
          .radio-wrap{
            width: 60rpx;
            height: 60rpx;
            position: relative;
            image{
              position: absolute;
              left: 12rpx;
              top: 16rpx;
              width: 36rpx;
              height: 36rpx;
              z-index: 1;
            }
            .radio{
              position:absolute;
              left: 0;
              top: 0;
              z-index: 2;
              opacity: 0;
            }
          }
        }
      }
    }
</style>
